<template>
	<view class="my">
		<headerTar :title="titleName" bgColor="#96d4a5" :isBack="false">
		</headerTar>
		<view class="header">
			<view class="top" @click="getUserInfo">
				<view class="t_left"><u-icon class="user" size="58" color="#fff" name="account-fill"></u-icon> </view>
				<view class="t_center">
					<view class="t_center_txt">{{userInfo.nickName}}</view>
					<view class="t_center_id">ID:26784215</view>
				</view>
				<!-- <view class="t_right"> 充电骑车</view> -->
			</view>
		</view>
		<view class="content">
			<view class="c_box" @click="gochargingOrder()">
				<view class="c_txt1">{{chargeNum}}</view>
				<view class="c_txt">充电中(条)</view>
			</view>
			<!-- 	<view class="c_box">
				<view class="c_txt1">0</view>
				<view class="c_txt">积分</view>
			</view> -->
			<view class="c_box" @click="goMoney()">
				<view class="c_txt1">{{moneyList.walletBalance}}</view>
				<view class="c_txt">钱包</view>
			</view>
			<view class="c_box" @click="goJump('recharge')">
				<view class="c_txt1"><img class="img" src="/static/tabs/money.png" alt=""></view>
				<view class="c_txt">充值中心</view>
			</view>
		</view>
		<view class="bottom">
			<view class="b_title">常用功能</view>
			<view class="b_content">
				<view class="b_box" @click="goJump('chargingOrder')"><img class="img" src="/static/index/record.png"
						alt="">
					<view class="b_txt">订单记录</view>
				</view>
				<view class="b_box" @click="goJump('map')"><img class="img" src="/static/index/map.png" alt="">
					<view class="b_txt">附近电桩</view>
				</view>
				<!-- 		<view class="b_box" @click="goJump('InputCode')"><img class="img" src="/static/index/powerStation.png"
						alt="">
					<view class="b_txt">设备码充电</view>
				</view> -->
				<!-- 		<view class="b_box"><img class="img" src="/static/index/qixing.png" alt="">
					<view class="b_txt">骑行保障</view>
				</view> -->
				<!-- 	<view class="b_box"><img class="img" src="/static/index/shengqian.png" alt="">
					<view class="b_txt">购物省钱</view>
				</view> -->
				<view class="b_box" @click="goJump('map')"><img class="img" src="/static/index/map.png" alt="" />
					<view class="b_txt">设备地图</view>
				</view>
				<view class="b_box"><img class="img" src="/static/index/powerStation.png"
						alt="" />
					<view class="b_txt">常用电站</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getUserInfoApi
	} from '@/api/my.js'
	import {
		getChargeOrderlistAPi
	} from "@/api/pay.js";
	import log from '../../utils/utils.log';
	import headerTar from '@/components/headerTar/header'
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				titleName: '个人中心',
				isLogin: '',
				userInfo: {
					nickName: '充电用户'
				},
				moneyList: '', //用户信息
				chargeNum: '' //充电数
			}
		},
		onLoad() {
			// 微信分享盆友圈
			// wx.showShareMenu({
			// 	withShareTicket: true,
			// 	menus: ["shareAppMessage", "shareTimeline"],
			// });
			// 判断是否有登入
			this.checkLogin();
			this.getUserInfo();
		},
		methods: {
			goJump(val) {
				uni.navigateTo({
					url: `/pages/${val}/${val}`
				});
			},
			goMoney() {
				uni.switchTab({
					url: `/pages/money/money`
				});
			},
			gochargingOrder() {
				uni.navigateTo({
					url: `/pages/chargingOrder/chargingOrder?current=1`
				});
			},
			// 检测是否有登入  赋值给xsUserInfo判断是否为空
			checkLogin: function() {
				var that = this;
				var token = uni.getStorageSync("token");
				if (token == "") {
					this.isLogin = false;
				} else {
					that.isLogin = true;
					that.userInfo = uni.getStorageSync("UserInfo");
				}
			},
			// 获取用户信息
			getUserInfo() {
				getUserInfoApi().then(res => {
					this.moneyList = res.data
				})
				//充电信息
				getChargeOrderlistAPi({
					pageNum: 1,
					orderStatus: "CHARGING"
				}).then((v) => {
					this.chargeNum = v.total;
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.my {
		padding: 0;
		margin: 0;

		.header {
			background: linear-gradient(#96d4a5, #fff);
			box-sizing: border-box;
			overflow: hidden;

			.top {
				width: 100%;
				height: 140rpx;
				margin: 20rpx 30rpx;
				display: flex;
				// border: 2rpx solid #e5e5e5;
				box-sizing: border-box;


				.t_left {
					margin-left: 20rpx;
					width: 130rpx;
					height: 130rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 75rpx;
					background-color: #2fbe62;
					overflow: hidden;
				}

				.t_center {
					margin-left: 20rpx;
					width: 400rpx;
					line-height: 60rpx;

					.t_center_txt {
						font-size: 34rpx;
						font-weight: bold;
					}

					.t_center_id {
						display: inline-block;
						margin-top: 30rpx;
						padding: 3rpx 10rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: left;
						font-size: 22rpx;
						color: #fff;
						border-radius: 30rpx;
						border: 2rpx solid #3dc579;
						background-color: #3dc579;
					}
				}

				.t_right {}
			}
		}

		.content {
			margin: 30rpx;
			display: flex;
			height: 140rpx;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			// border: 2rpx solid #e5e5e5;

			.c_box {
				flex: 1;
				line-height: 40rpx;
				// padding: 5px 15px;
				text-align: center;

				.c_txt1 {
					font-size: 36rpx;
					text-align: center;
					font-weight: bold;

					.img {
						width: 44rpx;
						height: 42rpx;
					}
				}

				.c_txt {
					color: #909499;
					margin-top: 10rpx;
					font-size: 28rpx;
				}
			}
		}

		.bottom {
			position: relative;
			margin: 30rpx;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			border: 2rpx solid #e5e5e5;

			.b_title::before {
				content: '';
				position: absolute;
				top: 36rpx;
				left: 20rpx;
				width: 6rpx;
				height: 32rpx;
				background-color: #3dc579;
			}

			.b_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
				margin-bottom: 30rpx;
			}

			.b_content {
				// width: 100%;
				margin-top: 30rpx;
				display: flex;
				// align-items: center;
				// justify-content: space-around;
				overflow: hidden;
				box-sizing: border-box;

				.b_box {
					width: 180rpx;
					margin-right: 60rpx;
					line-height: 40rpx;

					.img {
						margin-left: 20rpx;
						width: 45rpx;
						height: 45rpx;
					}

					.b_txt {
						margin-top: 5rpx;
						font-size: 24rpx;
						font-weight: bold;
					}
				}

				.b_box:nth-child(4n) {
					margin-right: 0rpx;
				}
			}
		}
	}
</style>